<template>
  <div class="app-container">
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="70%">
      <el-form ref="dialogForm" :model="form" :inline="true" :rules="rules" class="demo-ruleForm">
        <el-row :gutter="10">
          <el-col :span="11">
            <div class="grid-content bg-purple">
              <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="11">
            <div class="grid-content bg-purple">
              <el-form-item label="标识" :label-width="formLabelWidth" prop="url">
                <el-input v-model="form.url" autocomplete="off"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="11">
            <div class="grid-content bg-purple">
              <el-form-item label="值" :label-width="formLabelWidth" prop="name">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="11">
            <div class="grid-content bg-purple">
              <el-form-item label="是否启用" :label-width="formLabelWidth">
                <el-radio-group v-model="form.isValid">
                  <el-radio label="1">是</el-radio>
                  <el-radio label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="FormSub('dialogForm')">确 定</el-button>
      </div>
    </el-dialog>
    <el-button-group style="margin: 0px 0px 10px 0px">
      <el-button type="primary" icon="el-icon-plus" @click="dialogForm(1)">添加</el-button>
      <el-button type="primary" icon="el-icon-edit" @click="dialogForm(2)">修改</el-button>
      <el-button type="primary" icon="el-icon-delete" @click="dialogDelete()">删除</el-button>
    </el-button-group>
    <el-container>
      <el-aside width="200px">
        <el-header style="font-size: 12px">
          <el-input v-model="filterText" placeholder="输入关键字进行过滤" />
        </el-header>
        <el-main>
          <el-tree
            ref="tree"
            node-key="id"
            default-expand-all
            :props="props"
            :data="treeData"
            class="filter-tree"
            :filter-node-method="filterNode"
            @node-click="nodeClick"
          />
        </el-main>
      </el-aside>
      <el-container>
        <el-main>
          <el-table
            v-loading="listLoading"
            style="width: 100%;"
            :height="height"
            :data="list"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
          >
            <el-table-column align="center" label="ID" width="95">
              <template slot-scope="scope">
                {{ scope.$index }}
              </template>
            </el-table-column>
            <el-table-column label="标识" width="210" align="center">
              <template slot-scope="scope">
                {{ scope.row.prop }}
              </template>
            </el-table-column>
            <el-table-column label="名称" width="110" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.label }}</span>
              </template>
            </el-table-column>
            <el-table-column label="宽度" width="110" align="center" prop="created_at">
              <template slot-scope="scope">
                <span>{{ scope.row.width }}</span>
              </template>
            </el-table-column>
            <el-table-column class-name="status-col" label="函数" width="110" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.formatter }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            :layout="layout"
            :total="total"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            @size-change="sizeChange"
            @current-change="currentChange"
          />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { parseTime } from '@/utils'
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        0: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      columns: [],
      height: 200,
      winHeight: 200,
      title: '',
      props: {
        id: 'id',
        label: 'name',
        children: 'module'
      },
      dialogFormVisible: false,
      layout: 'sizes, prev, pager, next, jumper, ->, total',
      pageSizes: [10, 20, 30, 40, 50, 100],
      pageSize: 10,
      parent: 0,
      listModule: [],
      total: 0,
      currentPage: 1,
      treeData: [],
      filterText: '',
      list: [],
      listLoading: true,
      formLabelWidth: '120px',
      row: [],
      form: {
        id: '',
        addOrup: 1,
        sort: 1,
        name: '',
        isValid: '1',
        isMenu: '1',
        superMod: [],
        icon: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        icon: [
          { required: true, message: '请选择图标', trigger: 'blur' }
        ],
        superMod: [
          { required: true, message: '请选择父菜单', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请输入URL地址', trigger: 'blur' }
        ]
      }
    }
  },
  created: function() {
    this.height = (window.innerHeight > 300 ? window.innerHeight - 240 : 100)
    this.getMovie()
  },
  mounted() {
    // 挂载浏览器高度获取方法
    const that = this
    window.onresize = () => {
      return (() => {
        that.winHeight = window.innerHeight
      })()
    }
    // this.$refs.nav.style.height = this.winHeight + 'px'
  },
  watch: {
    // 监控浏览器高度变化
    winHeight(val) {
      this.winHeight = val
      this.height = (this.winHeight > 300 ? this.winHeight - 240 : 100)
    },
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    state(row, column) {
      return row.val === 0 ? '<el-tag type="success">可用</el-tag>' : '<el-tag type="success">禁用</el-tag>'
    },
    dialogDelete() {
      if (this.row.length <= 0) {
        alert('请先选择要删除的列!')
        return
      }
      const self = this
      this.$confirm('此操作将删除该列, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const that = this
        this.$http.get('/dev-api/role/del/' + this.row.id)
          .then(res => {
            that.$message({
              type: res.data.code === 20000 ? 'success' : 'info',
              message: res.data.code === 20000 ? '删除成功！' : '删除失败！'
            })
            self.getList(self.currentPage, self.pageSize, self.parent)
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    dialogForm(val) {
      this.form.id = ''
      this.form.sort = 1
      this.form.name = ''
      this.form.isValid = '1'
      this.form.isMenu = '1'
      this.form.superMod = []
      this.form.icon = ''
      if (val === 1) {
        this.title = '添加列'
        this.form.sort = 1
        this.form.addOrup = 1
      } else {
        if (this.row.length <= 0) {
          alert('请先选择要修改的列!')
          return
        }
        this.form.id = this.row.id
        this.form.sort = this.row.sort
        this.form.name = this.row.name
        this.form.isValid = this.row.isValid
        this.form.isMenu = this.row.isMenu
        this.form.icon = this.row.icon
        this.title = '修改列'
        this.form.addOrup = 2
      }
      this.dialogFormVisible = true
    },
    FormSub(formName) {
      const self = this
      if (this.form.addOrup === 1) {
        this.$refs[formName].validate((valid) => {
          this.form.superMod = this.value[this.value.length - 1 ]
          this.$http.post('/dev-api/role/save', this.form)
            .then(res => {
              this.dialogFormVisible = false
              self.$message({
                type: res.data.code === 20000 ? 'success' : 'info',
                message: res.data.code === 20000 ? '保存成功！' : '保存失败！'
              })
              self.getList(self.currentPage, self.pageSize, self.parent)
            })
        })
      } else {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.form.superMod = this.value[this.value.length - 1 ]
            this.$http.post('/dev-api/role/update', this.form)
              .then(res => {
                console.log(res.data.code)
                this.dialogFormVisible = false
                self.$message({
                  type: res.data.code === 20000 ? 'success' : 'info',
                  message: res.data.code === 20000 ? '修改成功！' : '修改失败！'
                })
                self.getList(self.currentPage, self.pageSize, self.parent)
              })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    },
    getList: function(currentPage, Size, parent) {
      var self = this
      this.$http.get('/dev-api/columns/table/list/' + parent + '?pageIndex=' + currentPage + '&pageSize=' + Size + '&parent=' + parent)
        .then(res => {
          self.list.pop()
          self.total = res.data.total
          self.list = res.data.data
          for (let i = 0; i < self.list.length; i++) {
            self.list[i].createTime = parseTime(self.list[i].createTime)
            self.list[i].modifyTime = parseTime(self.list[i].modifyTime)
            self.list[i].birthday = parseTime(self.list[i].birthday, '{y}-{m}-{d}')
          }
          self.listLoading = false
        })
    },
    nodeClick(data, Node, v) {
      this.parent = data.code
      this.getList(this.currentPage, this.pageSize, data.code)
    },
    currentChange(val) {
      this.currentPage = val
      this.getList(this.currentPage, this.pageSize, this.parent)
    },
    sizeChange(val) {
      this.pageSize = val
      this.getList(this.currentPage, this.pageSize, this.parent)
    },
    rowClick(row, column, event) {
      this.row = row
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    getMovie: function() {
      var self = this
      this.$http.get('/dev-api/dic/treeDic?parent=COLUMN_TABLE')
        .then(res => {
          self.treeData.pop()
          self.treeData = res.data.data
          self.parent = res.data.data[0].code
          this.getList(self.currentPage, self.pageSize, self.parent)
        })
    }
  }
}
</script>
